<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Android Icons-sms</title>
<style>
header{
	color:grey;
	width:300px;
	margin:0 auto;
}
#container {
background: white;
border: 1px solid #CCC;
list-style: none;
margin: 20px auto;
overflow: hidden;
padding: 2em;
position: relative;
width: 20em;
}

ul {
font: normal normal normal 0.875em/1 Arial, sans-serif;
list-style: none;
margin: 0px auto;
padding: 0px;
overflow: hidden;
width:10em;
}
ul li {
float: left;
margin: 20px 20px 0px 0px;
padding-left:20px;
}
ul li a {
border: 1px solid transparent;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
display: block;
line-height: 64px;
text-decoration: none;
text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
height: 1.6em;
width: 1em;
-webkit-transform: rotate(90deg) scale(1, 1);
-moz-transform: rotate(90deg) scale(1, 1);
font-family: arial, sans-serif;
}
.technorati a {
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
background: -webkit-gradient(linear, left top, right top, from(#96C832), to(#6D9124));
background-image: -moz-linear-gradient(left, #96C832,#6D9124);
border-color: #72962A;
color: whiteSmoke;
font-size: 3em;
margin:0 auto;
position: relative;
text-align:center;
}
.technorati a::after {
border-color: transparent whiteSmoke;
border-style: solid;
border-width: 18px 1px 1px 13px;
border-color:transparent transparent transparent #6D9124;
content: '' ;
font-size:3em;
left: 99%;
position: absolute;
bottom: 20%;
height: 0px;
width: 10px;
}
</style>

</head>
<body>
<header>
    <h1>Android SMS icon</h1>
    <p class="inspiration">用CSS3实现的安卓2.2系统短信图标,特点:</p>
   <p>不使用图片,基于语义化标签实现</p>
</header>

<div id="container">
<ul id="skiplinks">
	<li class="technorati"><a href="#" title="Android sms">:)</a></li>
</ul>
</div>

</body>
</html>
